<template>
  <div class="selectInput">
    <el-input v-model="keyValue" type="text" style="width: 100%" placeholder="请选择口味" clearable readonly
      @focus="selectFlavor(true)" @blur="outSelect(false)" />
    <div v-if="mak && dishFlavorsData.length" class="flavorSelect">
      <span v-for="(item, index) in dishFlavorsData" :key="index" class="items" @click="checkOption(item, index)">{{
        item.name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
// defineProps defineEmits 无需显示导入，但下面还是要定义使用的

//定义一个TypeScript接口DishFlavorName，表示菜品口味对象的结构
//该接口有一个name属性，类型为字符串
interface DishFlavorName {
  name: string;
}

/*
  defineProps用来定义组件可以接收哪些"外部传入的数据"（专业叫props）
  这里定义了三个可以接收的外部数据：
      dishFlavorsData: 菜品口味数据数组
      value: 可以是文字或数字的值
      index: 数字索引
*/
const props = defineProps({
  dishFlavorsData: {
    type: Array as () => DishFlavorName[],  // 这个属性应该是一个数组，数组里的每个元素都要符合DishFlavorName模板
    default: () => [],    // 如果父组件没有提供这个属性，默认就是一个空数组
  },
  value: {
    type: [String, Number], // 可以是字符串或数字类型
    default: '',    // 默认值为空字符串
  },
  index: {
    type: Number,   // 数字类型
    default: 0,     // 默认值为0
  },
})

//创建一个名为mak的响应式布尔值变量，初始值为false
const mak = ref(false);

//创建另一个响应式变量keyValue，初始值是props.value（从外部传入的值
const keyValue = ref(props.value)

/*
  定义一个函数selectFlavor，它接收一个参数status
  这个函数的作用是：把mak的值设置为传入的status
  any表示这个参数可以是任何类型（暂时不严格限制）
*/
const selectFlavor = (status: any) => {
  mak.value = status;
}

/*
  定义一个函数outSelect，也接收status参数
  这个函数会等待200毫秒（1/5秒）后，才把mak的值设置为status
  setTimeout就像设置一个闹钟，延迟执行某件事
*/
const outSelect = (status: any) => {
  setTimeout(() => {
    mak.value = status;
  }, 200)
}

// 使用setup语法糖的话要先引入defineEmits来定义
const emit = defineEmits(["select"])

/*
  定义一个函数checkOption，接收两个参数：
    item: 任意类型的数据（可能是菜品口味）
    index: 数字索引
  这个函数做了两件事：
    发送"select"事件，附带三个信息：
      当前选中项的名字(item.name)
      组件的索引(props.index)
      当前项的索引(index)
    把keyValue的值更新为当前选中项的名字
*/
const checkOption = (item: any, index: number) => {
  emit('select', item.name, props.index, index)
  keyValue.value = item.name
}

/*
  watch用来"监视"数据变化
  这里监视的是props.value（从外部传入的值）
  当props.value变化时，自动执行后面的函数
  这个函数把新的值(newVal)赋给keyValue
*/
watch(() => props.value, (newVal) => {
  keyValue.value = newVal
})

</script>

<style lang="less" scoped>
.selectInput {
  position: relative;
  width: 100%;
  min-width: 100px;

  .flavorSelect {
    position: absolute;
    width: 100%;
    // padding: 0 10px;
    border-radius: 3px;
    border: solid 1px #e4e7ed;
    line-height: 30px;
    text-align: center;
    background: #fff;
    top: 50px;
    z-index: 99;

    .items {
      cursor: pointer;
      display: inline-block;
      width: 100%;
      line-height: 35px;
      border-bottom: solid 1px #f4f4f4;
      color: #666;
      margin: 0 !important;

      &:hover {
        background-color: #fffbf0;
      }

      &:active {
        background-color: #fffbf0;
        color: #ffc200;
      }
    }

    .none {
      font-size: 14px;
    }
  }
}
</style>